<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="telephone=no" name="format-detection">
	<meta name="referrer" content="no-referrer">
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<title>浙江锦凯智塑科技有限公司</title>
	<link rel="stylesheet" type="text/css" href="css/public.css" />
	<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css?v=0.3" />
	<script type="text/javascript" src="js/jquery1.11.3.min.js"></script>
	<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<link rel="stylesheet" href="css/swiper.min.css">
	<script src="js/swiper.min.js"></script>
	<script src="js/swiper_honor.js"></script>
	<style>
		/* 视频容器基础样式 */
		.video-bg-circle {
			position: absolute;
			width: 500px;
			height: 500px;
			/* padding-top: 100%; */
			/* 1:1 宽高比 */
			border-radius: 50%;
			background-color: #e6e6e9;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 0;
		}

		.video-circle {
			position: relative;
			width: 450px;
			height: 450px;

			border-radius: 50%;
			object-fit: cover;
			display: block;
			cursor: pointer;
			z-index: 2;
		}

		.video-overlay {
			position: absolute;
			width: 90%;
			height: 90%;
			max-width: 450px;
			max-height: 450px;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.05);
			z-index: 1;
			filter: blur(5px);
		}

		/* 移动端适配 */
		@media screen and (max-width: 768px) {
			.video-bg-circle {
				width: 280px;
				height: 280px;
				padding-top: 0;
			}

			.video-circle,
			.video-overlay {
				width: 250px !important;
				height: 250px !important;
				max-width: 250px;
				max-height: 250px;
			}
		}

		/* 平板设备适配 */
		@media screen and (min-width: 769px) and (max-width: 1024px) {

			.video-circle,
			.video-overlay {
				width: 400px !important;
				height: 400px !important;
				max-width: 400px;
				max-height: 400px;
			}

			.video-bg-circle {
				width: 420px;
				height: 420px;
				padding-top: 0;
			}
		}

		/* 移动端响应式样式 - 优化版 */
		@media screen and (max-width: 768px) {
			.homeSp {
				padding: 20px 0 !important;
			}

			#about .wrap {
				height: auto !important;
				display: flex;
				flex-direction: column;
				padding: 0 15px;
			}

			.left-part {
				width: 100% !important;
				padding: 0 5px;
				margin-bottom: 30px;
				order: 2;
			}

			.left-part h3 {
				font-size: 22px;
				margin-bottom: 15px;
				text-align: center;
			}

			.lt-text p {
				font-size: 15px !important;
				line-height: 1.8 !important;
				margin-bottom: 15px !important;
			}

			.lt-text ul {
				padding-left: 10px !important;
			}

			.lt-text li {
				margin-bottom: 12px !important;
				padding-left: 28px !important;
			}

			.lt-text li img {
				width: 18px !important;
				height: 18px !important;
				top: 3px !important;
			}

			.video-container {
				order: 1;
				width: 100% !important;
				max-width: 280px;
				margin: 0 auto 30px !important;
				position: relative;
			}

			.video-container>div:first-child {
				width: 100% !important;
				padding-top: 100%;
				position: relative;
			}

			.video-container video,
			.video-container>div:first-child>div:first-child,
			.video-container>div:first-child>div:last-child {
				position: absolute;
				top: 0;
				left: 0;
				width: 100% !important;
				height: 100% !important;
				max-width: 100%;
				max-height: 100%;
				transform: none;
			}

			.video-container>div:first-child>div:first-child {
				background-color: #f0f0f0;
			}

			.video-container>div:first-child>div:last-child {
				background-color: rgba(0, 0, 0, 0.03);
				filter: blur(3px);
			}

			.video-container>div:nth-child(n+2) {
				display: none;
			}

			#playButton {
				width: 50px !important;
				height: 50px !important;
			}

			#playButton svg {
				width: 24px;
				height: 24px;
			}
		}


		/* 平板设备适配 */
		@media screen and (min-width: 769px) and (max-width: 1024px) {
			.left-part {
				width: 50% !important;
				padding-right: 20px;
			}

			.video-container {
				margin-left: 30px !important;
			}

			.video-container>div:first-child>div:first-child,
			.video-container>div:first-child>video,
			.video-container>div:first-child>div:last-child {
				width: 400px !important;
				height: 400px !important;
			}
		}

		/* 联系信息栏样式 */
		.contact-bar {
			background-color: rgb(232, 143, 47);
			border-bottom: 1px solid #eee;
			padding: 8px 0;
			font-size: 14px;
			position: relative;
			z-index: 1000;
			line-height: 1.5;
		}

		.contact-info {
			text-align: right;

		}

		.contact-info span {
			margin-left: 20px;
			color: #222222;
		}

		.contact-info i {
			margin-right: 5px;
			color: #999;
		}

		#about .title {
			padding-top: 140px;
			margin-bottom: 36px;
			color: var(--Text-5, #303133);
			font-size: 48px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
		}

		#about span {
			color: #f8f6ee;
			font-size: 48px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
		}

		#about .line {
			background: #303133;
			width: 72px;
			height: 3px;
		}

		#about .content {
			margin-top: 56px;
			margin-bottom: 100px;
			color: #000;
			font-size: 22px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}

		#about .wrap {
			display: flex;

			.left-part {
				width: 55%;

				h3 {
					font-size: 38px;
					font-weight: bold;
					color: #333;
				}

				.lt-text {
					width: 100%;
					margin-top: 24px;

					p {
						font-size: 16px;
						max-width: 650px;

						line-height: 1.8;
					}

					ul {
						list-style-type: disc;
						padding-top: 60px;

						li {
							list-style: none;
							width: 44%;
							float: left;
							position: relative;
							padding-left: 30px;
							padding-right: 10px;
							padding-bottom: 20px;

							p {
								font-size: 16px;
								font-weight: bold;
								line-height: 21px;
								color: #333;

								img {
									position: absolute;
									left: 0px;
									top: 0px;
								}
							}

						}
					}
				}
			}
		}
	</style>
</head>

<body>
	<!--top-->
	<div id="top">

		<div class="wrap clearfloat">
			<div class="logo"><a href="index.html"><img
						src="https://ossbucketzhink.oss-cn-hangzhou.aliyuncs.com/home-assets/mainlogo-1.png" /></a>
			</div>
			<div id="nav">
				<ul class="clearfloat menu-wrapper">
					<li class="active">
						<a href="index.html">首页</a>
					</li>
					<li>
						<a href="about.html">关于我们</a>
					</li>
					<li>
						<a href="product.html">生产工艺</a>
					</li>
					<li>
						<a href="show.html">产品展示 </a>
					</li>
					<li>
						<a href="news.html">新闻中心</a>
					</li>
					<li>
						<a href="hr.html">人力资源</a>
					</li>
					<li>
						<a href="sample.html">咨询建议</a>
					</li>
					<li>
						<a href="contact.html">联系我们</a>
					</li>
				</ul>
			</div>
			<!-- <div class="language"><a href="https://jkaiplastic.com/">EN</a></div> -->
			<div class="language"><a href="https://jkaiplastic.com/">EN</a></div>
		</div>

		<div class="muen">
			<span class="muenX"></span>
			<span class="muenY"></span>
			<span class="muenZ"></span>
		</div>


	</div>
	<!--/top-->

	<!--main-->
	<div class="main">
		<div style="  width: 100%;">
			<div class="banner">
				<ul class="slider1"></ul>
			</div>
		</div>
		<style>
			/* 移动端适配 */
			@media screen and (max-width: 768px) {
				.stats-container {
					display: grid !important;
					grid-template-columns: 1fr 1fr;
					gap: 15px;
					padding: 0 10px;
				}

				.stat-card {
					width: 100% !important;
					margin: 0 !important;
					padding: 15px 5px !important;
				}

				.stat-number {
					font-size: 22px !important;
				}

				.stat-text {
					font-size: 13px !important;
				}

				.stat-card img {
					width: 35px !important;
				}
			}
		</style>

		<!-- 数字介绍 -->
		<div class="stats-section">
			<div class="wrap">
				<div class="stats-container" style="display: flex; justify-content: space-between; flex-wrap: wrap;">
					<div class="stat-card"
						style="background: white; border-radius: 10px; padding: 10px; text-align: center; width: 22%; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"
						data-value="223" data-suffix="亩">
						<img src="https://image.cdn.ishopastro.com/eyJidWNrZXQiOiJwcm9kLW1lZGlhLW15c2hvcGFzdHJvLWNvbSIsImtleSI6Ijc5OTg3NjY0OTAyNDMxOS9tZWRpYS9pbWFnZS9lZTVkMTVhZDEyMDI2NTM2MDc5NzAyNTIucG5nIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjozMDB9LCJyb3RhdGUiOm51bGx9fQ==?w=300"
							alt="" style="width: 53px;margin-bottom: 4px;">
						<div style="display: flex; align-items: center; justify-content: center;">
							<span class="stat-number"
								style="font-size: 32px; font-weight: bold; color: #333; margin-right: 8px;">0</span>
							<span class="stat-text" style="font-size: 16px; color: #666; margin-bottom: 0;">公司占地</span>
						</div>
					</div>
					<div class="stat-card"
						style="background: white; border-radius: 10px; padding: 10px; text-align: center; width: 22%; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"
						data-value="15" data-suffix="亿">
						<img src="https://image.cdn.ishopastro.com/eyJidWNrZXQiOiJwcm9kLW1lZGlhLW15c2hvcGFzdHJvLWNvbSIsImtleSI6Ijc5OTg3NjY0OTAyNDMxOS9tZWRpYS9pbWFnZS8yMDQxOWQ5ZDEyMDE0ODMwOTUxNTk5OTMucG5nIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjozMDB9LCJyb3RhdGUiOm51bGx9fQ==?w=300"
							alt="" style="width: 53px;margin-bottom: 4px;">
						<div style="display: flex; align-items: center; justify-content: center;">
							<span class="stat-number"
								style="font-size: 32px; font-weight: bold; color: #333; margin-right: 8px;">0</span>
							<span class="stat-text" style="font-size: 16px; color: #666; margin-bottom: 0;">集团投资</span>
						</div>
					</div>
					<div class="stat-card"
						style="background: white; border-radius: 10px; padding: 10px; text-align: center; width: 22%; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"
						data-value="60" data-suffix="亿套">
						<img src="https://image.cdn.ishopastro.com/eyJidWNrZXQiOiJwcm9kLW1lZGlhLW15c2hvcGFzdHJvLWNvbSIsImtleSI6Ijc5OTg3NjY0OTAyNDMxOS9tZWRpYS9pbWFnZS8zMzJkMWVhYzEyMDI2NTM2MDc5NzAyMzVfbWVudS5wbmciLCJlZGl0cyI6eyJyZXNpemUiOnsid2lkdGgiOjMwMH0sInJvdGF0ZSI6bnVsbH19?w=300"
							alt="" style="width: 53px;margin-bottom: 4px;">
						<div style="display: flex; align-items: center; justify-content: center;">
							<span class="stat-number"
								style="font-size: 32px; font-weight: bold; color: #333; margin-right: 8px;">0</span>
							<span class="stat-text" style="font-size: 16px; color: #666; margin-bottom: 0;">年产能</span>
						</div>
					</div>
					<div class="stat-card"
						style="background: white; border-radius: 10px; padding: 10px; text-align: center; width: 22%; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"
						data-value="94" data-suffix="%">
						<img src="https://image.cdn.ishopastro.com/eyJidWNrZXQiOiJwcm9kLW1lZGlhLW15c2hvcGFzdHJvLWNvbSIsImtleSI6Ijc5OTg3NjY0OTAyNDMxOS9tZWRpYS9pbWFnZS9iM2QyMjkzMTEyMDE0ODMwOTUxNTk5OTAucG5nIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjozMDB9LCJyb3RhdGUiOm51bGx9fQ==?w=300"
							alt="" style="width: 53px;margin-bottom: 4px;">
						<div style="display: flex; align-items: center; justify-content: center;">
							<span class="stat-number"
								style="font-size: 32px; font-weight: bold; color: #333; margin-right: 8px;">0</span>
							<span class="stat-text" style="font-size: 16px; color: #666; margin-bottom: 0;">材料回收率</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 公司介绍 -->
		<!-- <div class="homeAdvance" style="background-color: #f8f6ee;">
			<div class="aboutRH" style="margin-bottom:50px;margin-top: 0;">
				<h2>公司介绍</h2>
			</div>
			<div
				style="max-width: 1280px; margin: 0 auto; padding: 0 20px; text-align: justify; line-height: 2; text-indent: 2em; font-size: 18px;">
				<p>浙江锦凯智塑科技有限公司是全球最大的PET杯生产商。</p>

				<p>锦凯是中国民营企业500强正凯集团旗下的全资子公司，浙江正凯集团创建于1992年，成立于1997年，是一家专注于全球PET与纺织两大产业发展的现代化标杆企业。依托集团PET绿色循环全产业链优势，浙江锦凯深耕全球食品级PET新材料包装领域，充分释放材料核心价值，构建起包装行业全生命周期低碳发展范式，引领绿色包装新方向。
				</p>

				<p>2022年，公司投资15亿以"信息化、数字化、智能化"为标准，引进国际领先的挤出一热成型工艺设备，建成占地223亩的自动化工厂，规划出年产PET杯60亿套的核心产能。凭借三大自动化车间、两大立体库的高效布局，公司成功获评2024年"浙江省数字化车间"，彰显智能制造硬实力，更以16项专利技术加持，夯实产品创新壁垒。
				</p>

				<p>目前，公司主营咖啡、奶茶、甜品、水果等全品类食品包装容器，既满足客户"一站式采购"需求，更提供"全流程定制"专属服务，致力于为全球合作伙伴创造更高价值。</p>
			</div>
		</div> -->

		<div class="homeSp" style="padding-top: 80px;background-color: #f9f9f9;">
			<!-- 视频 -->
			<div id="about">
				<div class="wrap" style="height: 450px;">
					<div class="left-part" style="text-align: justify;">
						<div>
							<h3 style="text-align: left;">锦凯智塑</h3>
						</div>
						<div class="lt-text" style="text-align: justify;">
							<p style="text-indent: 2em; margin-bottom: 20px; line-height: 1.8;">
								浙江锦凯智塑科技有限公司是全球领先的PET杯生产商。锦凯是中国民营企业500强正凯集团旗下的全资子公司，浙江正凯集团创建于1992年，成立于1997年，是一家专注于全球PET与纺织两大产业发展的现代化标杆企业。依托集团PET绿色循环全产业链优势，浙江锦凯深耕全球食品级PET新材料包装领域，充分释放材料核心价值，构建起包装行业全生命周期低碳发展范式，引领绿色包装新方向。
							</p>
							<ul style="padding-left: 0; margin-top: 20px;">
								<li style="margin-bottom: 15px; padding-left: 30px; position: relative;">
									<p style="margin: 0; line-height: 1.6; text-align: left;">
										<img src="https://zhink.oss-cn-hangzhou.aliyuncs.com/temp/1649664823404791_1765850017508.png"
											alt=""
											style="position: absolute; left: 0; top: 5px; width: 20px; height: 20px;">
										深耕PET全产业链，铸就行业领军优势
									</p>
								</li>
								<li style="margin-bottom: 15px; padding-left: 30px; position: relative;">
									<p style="margin: 0; line-height: 1.6; text-align: left;">
										<img src="https://zhink.oss-cn-hangzhou.aliyuncs.com/temp/1649664823404791_1765850017508.png"
											alt=""
											style="position: absolute; left: 0; top: 5px; width: 20px; height: 20px;">
										PET杯&盖生产规模全球居首
									</p>
								</li>
								<li style="margin-bottom: 15px; padding-left: 30px; position: relative;">
									<p style="margin: 0; line-height: 1.6; text-align: left;">
										<img src="https://zhink.oss-cn-hangzhou.aliyuncs.com/temp/1649664823404791_1765850017508.png"
											alt=""
											style="position: absolute; left: 0; top: 5px; width: 20px; height: 20px;">
										选用国际一流成型设备
									</p>
								</li>
								<li style="padding-left: 30px; position: relative;">
									<p style="margin: 0; line-height: 1.6; text-align: left;">
										<img src="https://zhink.oss-cn-hangzhou.aliyuncs.com/temp/1649664823404791_1765850017508.png"
											alt=""
											style="position: absolute; left: 0; top: 5px; width: 20px; height: 20px;">
										智能立体仓储，轻松容纳5.7亿杯
									</p>
								</li>
							</ul>
						</div>
					</div>
					<!-- <div class="title" style="padding-top: 20px;">
						关于<span>锦凯智塑</span>
					</div> -->
					<!-- <div class="line"></div> -->
					<!-- <div class="content">
						锦凯智塑为正凯集团下属全资子公司，是采用高端绿色PET原材料和国际先进工艺设备的食品包装容器提供商
					</div> -->
					<div class="video-container" style="position: relative; display: inline-block; margin-left: 90px;">
						<div style="position: relative; z-index: 1;">
							<!-- 外层灰色底片 -->
							<!-- <div
								style="position: absolute; width: 500px; height: 500px; border-radius: 50%; background-color: #e6e6e9; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0;">
							</div> -->
							<div class="video-bg-circle"></div>
							<video id="video" class="video-circle"
								src="https://zhink.oss-cn-hangzhou.aliyuncs.com/temp/A首页视频（精华版）替换原来的_1765847974362.mp4"
								poster="./images/video-post.png" controlsList="nodownload">
								您的浏览器不支持 video 标签。
							</video>
							<!-- <video id="video"
								style="width: 450px; height: 450px; border-radius: 50%; object-fit: cover; display: block; cursor: pointer; position: relative; z-index: 2;"
								src="https://zhink.oss-cn-hangzhou.aliyuncs.com/temp/A首页视频（精华版）替换原来的_1765847974362.mp4"
								poster="./images/video-post.png" controlsList="nodownload">
								您的浏览器不支持 video 标签。
							</video> -->
							<!-- 灰色圆形蒙版 -->
							<div
								style="position: absolute; width: 450px; height: 450px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.05); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; filter: blur(5px);">
							</div>
						</div>
						<!-- 装饰性圆形元素 -->
						<div
							style="position: absolute; width: 120px; height: 120px; background-color: #f08200; border-radius: 50%; top: -30px; left: -30px; z-index: 2;">
						</div>
						<div
							style="position: absolute; width: 80px; height: 80px; background-color: #f0820020; border-radius: 50%; bottom: 30px; right: -20px; z-index: 2;">
						</div>
						<div
							style="position: absolute; width: 60px; height: 60px; background-color: #f0820030; border-radius: 50%; top: 50%; right: -100px; transform: translateY(-50%); z-index: 2;">
						</div>
						<!-- 播放按钮 -->
						<div id="playButton"
							style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; z-index: 2;">
							<svg width="40" height="40" viewBox="0 0 24 24" fill="#333">
								<path d="M8 5v14l11-7z" />
							</svg>
						</div>
					</div>
					<script>
						document.addEventListener('DOMContentLoaded', function () {
							const video = document.getElementById('video');
							const playButton = document.getElementById('playButton');

							// 点击播放按钮播放视频
							playButton.addEventListener('click', function (e) {
								e.stopPropagation(); // 阻止事件冒泡
								video.play();
								playButton.style.display = 'none';
							});

							// 点击视频区域切换播放/暂停
							video.addEventListener('click', function () {
								if (video.paused) {
									video.play();
								} else {
									video.pause();
								}
							});

							// 视频播放时隐藏播放按钮
							video.addEventListener('play', function () {
								playButton.style.display = 'none';
							});

							// 视频暂停时显示播放按钮
							video.addEventListener('pause', function () {
								if (video.currentTime > 0) {
									playButton.style.display = 'flex';
								}
							});

							// 视频结束后显示播放按钮
							video.addEventListener('ended', function () {
								playButton.style.display = 'flex';
							});
						});
					</script>
				</div>
			</div>
		</div>

		<!-- 产品轮播图 -->
		<div class="homeAdvance" style="background-color:#f8f6ee ;">
			<div class="aboutRH" style="margin-bottom:50px;margin-top: 0;">
				<h2>全场景包装解决方案</h2>
			</div>
			<div
				style="max-width: 1280px; margin: 0 auto; padding: 0 20px; text-align: justify; line-height: 2; text-indent: 2em; font-size: 18px;">
				<p>公司产品主要为食品、饮品的包装容器，可用于茶饮、咖啡、果汁、牛奶、冰淇淋蛋糕、谷物等产品。品类丰富多样，使用场景多元，让您的产品从“功能容器”升级为“消费者记忆点”，助力销量与品牌力双增长！</p>

				<!-- 产品轮播图 -->
				<div class="product-carousel-container" style="margin-top: 40px;">
					<div class="product-carousel swiper-container">
						<div class="swiper-wrapper" style="margin-bottom: 20px;">

							<!-- 产品图片轮播项 -->
							<div class="swiper-slide">
								<div class="product-item">
									<img src="images/products/01.jpg" alt="客户定制" class="product-image">
									<p class="product-title">客户定制</p>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="product-item">
									<img src="images/products/02.jpg" alt="果汁" class="product-image">
									<p class="product-title">果汁杯系列</p>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="product-item">
									<img src="images/products/03.jpg" alt="甜品杯系列" class="product-image">
									<p class="product-title">甜品杯系列</p>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="product-item">
									<img src="images/products/04.jpg" alt="咖啡杯系列" class="product-image">
									<p class="product-title">咖啡杯系列</p>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="product-item">
									<img src="images/products/05.jpg" alt="水果杯系列" class="product-image">
									<p class="product-title">水果杯系列</p>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="product-item">
									<img src="images/products/06.jpg" alt="谷物杯系列" class="product-image">
									<p class="product-title">谷物杯系列</p>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="product-item">
									<img src="images/products/07.png" alt="沙拉杯系列" class="product-image">
									<p class="product-title">沙拉杯系列</p>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="product-item">
									<img src="images/products/08.jpg" alt="平盖杯系列" class="product-image">
									<p class="product-title">平盖杯系列</p>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="product-item">
									<img src="images/products/09.jpg" alt="直饮盖杯系列" class="product-image">
									<p class="product-title">直饮盖杯系列</p>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="product-item">
									<img src="images/products/10.jpg" alt="拱盖杯系列" class="product-image">
									<p class="product-title">拱盖杯系列</p>
								</div>
							</div>
						</div>
						<!-- 添加导航按钮 -->
						<!-- <div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div> -->
						<!-- 添加分页器 -->
						<div class="swiper-pagination"></div>
					</div>
				</div>

				<style>
					/* 产品轮播图样式 */
					.product-carousel-container {
						margin-top: 40px;
						padding: 0 10px;
					}

					.product-carousel {
						position: relative;
						overflow: hidden;
						padding: 20px 0;
					}

					.product-item {
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						text-align: center;
						/* padding: 0 15px; */
						transition: transform 0.3s ease;
					}

					.product-item:hover {
						transform: translateY(-5px);
					}

					.product-image {
						width: 100%;
						/* height: 250px; */
						object-fit: cover;
						border-radius: 8px;
						box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
						transition: transform 0.3s ease, box-shadow 0.3s ease;
					}

					.product-item:hover .product-image {
						box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
					}

					.product-title {
						font-size: 16px;
						color: #333;
						margin-top: 15px;
						font-weight: 500;
					}

					/* 导航按钮样式 */
					.swiper-button-next,
					.swiper-button-prev {
						color: #f08200;
						width: 40px;
						height: 40px;
						background: rgba(255, 255, 255, 0.9);
						border-radius: 50%;
						box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
						transition: all 0.3s ease;
					}

					.swiper-button-next:after,
					.swiper-button-prev:after {
						font-size: 20px;
						font-weight: bold;
					}

					.swiper-button-next:hover,
					.swiper-button-prev:hover {
						background: #f08200;
						color: #fff;
					}

					/* 分页器样式 */
					.swiper-pagination-bullet {
						width: 10px;
						height: 10px;
						background: #ddd;
						opacity: 1;
					}

					.swiper-pagination-bullet-active {
						background: #f08200;
						width: 30px;
						border-radius: 5px;
					}

					/* 响应式调整 */
					@media (max-width: 1024px) {
						.product-image {
							height: 200px;
						}
					}

					@media (max-width: 768px) {
						.product-carousel-container {
							padding: 0 10px;
						}

						.product-item {
							padding: 0 5px;
						}

						.product-image {
							height: 180px;
						}
					}

					@media (max-width: 480px) {
						.product-image {
							height: 160px;
						}

						.product-title {
							font-size: 14px;
							margin-top: 10px;
						}
					}
				</style>

				<script>
					// 初始化产品轮播
					document.addEventListener('DOMContentLoaded', function () {
						var swiper = new Swiper('.product-carousel', {
							slidesPerView: 4,
							spaceBetween: 20,
							loop: true,
							autoplay: {
								delay: 3000,
								disableOnInteraction: false,
							},
							pagination: {
								el: '.swiper-pagination',
								clickable: true,
							},
							navigation: {
								nextEl: '.swiper-button-next',
								prevEl: '.swiper-button-prev',
							},
							breakpoints: {
								320: {
									slidesPerView: 1,
									spaceBetween: 20
								},
								640: {
									slidesPerView: 2,
									spaceBetween: 20
								},
								1024: {
									slidesPerView: 4,
									spaceBetween: 30
								}
							}
						});
					});
				</script>

			</div>
		</div>

		<!-- 合作伙伴 -->
		<div class="partners-section">
			<div class="">
				<img src="images/products/parters.jpg" alt="合作伙伴" class="partners-image">
			</div>
		</div>
		<style>
			.partners-section {
				padding: 40px 0;
				background-color: #fff;
				overflow: hidden;
			}

			.partners-section .wrap {
				max-width: 1400px;
				margin: 0 auto;
				padding: 0 20px;
			}

			.partners-image {
				max-width: 100%;
				height: auto;
				display: block;
				margin: 0 auto;
				border-radius: 8px;
			}

			/* 响应式调整 */
			@media (max-width: 768px) {
				.partners-section {
					padding: 30px 0;
				}

				.partners-section .wrap {
					padding: 0 15px;
				}
			}
		</style>
		<!-- 体系证书 -->
		<div class="homeAdvance" style="background-color: #f8f6ee;">
			<div class="aboutRH" style="margin-bottom:50px;margin-top: 0;">
				<h2>体系证书</h2>
			</div>
			<div
				style="max-width: 1280px; margin: 0 auto; padding: 0 20px; text-align: justify; line-height: 2; text-indent: 2em; font-size: 18px;">
				<!-- <p>公司产品主要为食品、饮品的包装容器，可用于茶饮、咖啡、果汁、牛奶、冰淇淋蛋糕、谷物等产品。品类丰富多样，使用场景多元，让您的产品从“功能容器”升级为“消费者记忆点”，助力销量与品牌力双增长！</p> -->

				<!-- 体系证书轮播图 -->
				<div class="cert-carousel-container" style="margin-top: 40px;">
					<div class="cert-carousel swiper-container">
						<div class="swiper-wrapper" style="margin-bottom: 40px;">

							<!-- 体系证书图片轮播项 -->
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/cert/01.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/cert/02.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/cert/03.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/cert/04.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/cert/05.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/cert/06.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/cert/07.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/cert/08.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/cert/09.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/cert/10.png" class="cert-image" loading="lazy">
								</div>
							</div>

						</div>
						<!-- 添加导航按钮 -->
						<!-- <div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div> -->
						<!-- 添加分页器 -->
						<div class="swiper-pagination"></div>
					</div>
				</div>

				<style>
					/* 产品轮播图样式 */
					.cert-carousel-container {
						margin-top: 40px;
						padding: 0 10px;
					}

					.cert-carousel {
						position: relative;
						overflow: hidden;
						padding: 20px 0;
					}

					.cert-item {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						/* padding: 0 5px; */
						transition: transform 0.3s ease;
					}

					.cert-item:hover {
						transform: translateY(-5px);
					}

					.cert-image {
						width: auto;
						max-width: 100%;
						/* height: 375px; */
						object-fit: contain;
						/* 确保图片完整显示 */
						border-radius: 8px;
						box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
						transition: transform 0.3s ease, box-shadow 0.3s ease;
					}

					.product-item:hover .product-image {
						box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
					}

					.product-title {
						font-size: 16px;
						color: #333;
						margin-top: 15px;
						font-weight: 500;
					}

					/* 导航按钮样式 */
					.swiper-button-next,
					.swiper-button-prev {
						color: #f08200;
						width: 40px;
						height: 40px;
						background: rgba(255, 255, 255, 0.9);
						border-radius: 50%;
						box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
						transition: all 0.3s ease;
					}

					.swiper-button-next:after,
					.swiper-button-prev:after {
						font-size: 20px;
						font-weight: bold;
					}

					.swiper-button-next:hover,
					.swiper-button-prev:hover {
						background: #f08200;
						color: #fff;
					}

					/* 分页器样式 */
					.swiper-pagination-bullet {
						width: 10px;
						height: 10px;
						background: #ddd;
						opacity: 1;
					}

					.swiper-pagination-bullet-active {
						background: #f08200;
						width: 30px;
						border-radius: 5px;
					}

					/* 响应式调整 */
					@media (max-width: 1024px) {
						.product-image {
							height: 200px;
						}
					}

					@media (max-width: 768px) {
						.product-carousel-container {
							padding: 0 10px;
						}

						.product-item {
							padding: 0 5px;
						}

						.product-image {
							height: 180px;
						}
					}

					@media (max-width: 480px) {
						.product-image {
							height: 160px;
						}

						.product-title {
							font-size: 14px;
							margin-top: 10px;
						}
					}
				</style>

				<script>
					// 图片懒加载函数
					function lazyLoadImages() {
						const images = document.querySelectorAll('.cert-image[data-src]');

						const imageObserver = new IntersectionObserver((entries, observer) => {
							entries.forEach(entry => {
								if (entry.isIntersecting) {
									const img = entry.target;
									const src = img.getAttribute('data-src');

									if (src) {
										img.src = src;
										img.removeAttribute('data-src');
									}

									observer.unobserve(img);
								}
							});
						}, {
							rootMargin: '50px 0px',
							threshold: 0.01
						});

						images.forEach(image => {
							imageObserver.observe(image);
						});
					}

					// 初始化产品轮播
					document.addEventListener('DOMContentLoaded', function () {
						var swiper = new Swiper('.cert-carousel', {
							slidesPerView: 4,
							spaceBetween: 10,
							loop: true,
							autoplay: {
								delay: 3000,
								disableOnInteraction: false,
							},
							pagination: {
								el: '.swiper-pagination',
								clickable: true,
							},
							navigation: {
								nextEl: '.swiper-button-next',
								prevEl: '.swiper-button-prev',
							},
							breakpoints: {
								320: {
									slidesPerView: 1,
									spaceBetween: 20
								},
								640: {
									slidesPerView: 2,
									spaceBetween: 20
								},
								1024: {
									slidesPerView: 4,
									spaceBetween: 10
								}
							},
							on: {
								init: function () {
									// 初始加载首屏可见图片
									lazyLoadImages();
								},
								slideChange: function () {
									// 每次滑动后加载新出现的图片
									lazyLoadImages();
								}
							}
						});
					});

					// 添加窗口滚动事件监听，用于处理初始加载时可能不在视口中的图片
					window.addEventListener('load', lazyLoadImages);
				</script>

			</div>
		</div>
		<!-- 体系证书 -->
		<div class="homeAdvance" style="background-color: #f9f9f9;">
			<div class="aboutRH" style="margin-bottom:50px;margin-top: 0;">
				<h2>专利证书</h2>
			</div>
			<div
				style="max-width: 1280px; margin: 0 auto; padding: 0 20px; text-align: justify; line-height: 2; text-indent: 2em; font-size: 18px;">
				<!-- <p>公司产品主要为食品、饮品的包装容器，可用于茶饮、咖啡、果汁、牛奶、冰淇淋蛋糕、谷物等产品。品类丰富多样，使用场景多元，让您的产品从“功能容器”升级为“消费者记忆点”，助力销量与品牌力双增长！</p> -->

				<!-- 体系证书轮播图 -->
				<div class="cert-carousel-container" style="margin-top: 40px;">
					<div class="cert-carousel swiper-container">
						<div class="swiper-wrapper" style="margin-bottom: 40px;">

							<!-- 体系证书图片轮播项 -->
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/patent/01.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/patent/02.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/patent/03.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/patent/04.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/patent/05.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/patent/06.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/patent/07.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/patent/08.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/patent/09.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/patent/10.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/patent/11.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/patent/12.png" class="cert-image" loading="lazy">
								</div>
							</div>
							<div class="swiper-slide">
								<div class="cert-item">
									<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
										data-src="images/patent/13.png" class="cert-image" loading="lazy">
								</div>
							</div>

						</div>
						<!-- 添加导航按钮 -->
						<!-- <div class="swiper-button-next"></div>
						<div class="swiper-button-prev"></div> -->
						<!-- 添加分页器 -->
						<div class="swiper-pagination"></div>
					</div>
				</div>

				<style>
					/* 产品轮播图样式 */
					.cert-carousel-container {
						margin-top: 40px;
						padding: 0 10px;
					}

					.cert-carousel {
						position: relative;
						overflow: hidden;
						padding: 20px 0;
					}

					.cert-item {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						/* padding: 0 5px; */
						transition: transform 0.3s ease;
					}

					.cert-item:hover {
						transform: translateY(-5px);
					}

					.cert-image {
						width: auto;
						max-width: 100%;
						/* height: 375px; */
						object-fit: contain;
						/* 确保图片完整显示 */
						border-radius: 8px;
						box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
						transition: transform 0.3s ease, box-shadow 0.3s ease;
					}

					.product-item:hover .product-image {
						box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
					}

					.product-title {
						font-size: 16px;
						color: #333;
						margin-top: 15px;
						font-weight: 500;
					}

					/* 导航按钮样式 */
					.swiper-button-next,
					.swiper-button-prev {
						color: #f08200;
						width: 40px;
						height: 40px;
						background: rgba(255, 255, 255, 0.9);
						border-radius: 50%;
						box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
						transition: all 0.3s ease;
					}

					.swiper-button-next:after,
					.swiper-button-prev:after {
						font-size: 20px;
						font-weight: bold;
					}

					.swiper-button-next:hover,
					.swiper-button-prev:hover {
						background: #f08200;
						color: #fff;
					}

					/* 分页器样式 */
					.swiper-pagination-bullet {
						width: 10px;
						height: 10px;
						background: #ddd;
						opacity: 1;
					}

					.swiper-pagination-bullet-active {
						background: #f08200;
						width: 30px;
						border-radius: 5px;
					}

					/* 响应式调整 */
					@media (max-width: 1024px) {
						.product-image {
							height: 200px;
						}
					}

					@media (max-width: 768px) {
						.product-carousel-container {
							padding: 0 10px;
						}

						.product-item {
							padding: 0 5px;
						}

						.product-image {
							height: 180px;
						}
					}

					@media (max-width: 480px) {
						.product-image {
							height: 160px;
						}

						.product-title {
							font-size: 14px;
							margin-top: 10px;
						}
					}
				</style>

				<script>
					// 图片懒加载函数
					function lazyLoadImages() {
						const images = document.querySelectorAll('.cert-image[data-src]');

						const imageObserver = new IntersectionObserver((entries, observer) => {
							entries.forEach(entry => {
								if (entry.isIntersecting) {
									const img = entry.target;
									const src = img.getAttribute('data-src');

									if (src) {
										img.src = src;
										img.removeAttribute('data-src');
									}

									observer.unobserve(img);
								}
							});
						}, {
							rootMargin: '50px 0px',
							threshold: 0.01
						});

						images.forEach(image => {
							imageObserver.observe(image);
						});
					}

					// 初始化产品轮播
					document.addEventListener('DOMContentLoaded', function () {
						var swiper = new Swiper('.cert-carousel', {
							slidesPerView: 4,
							spaceBetween: 10,
							loop: true,
							autoplay: {
								delay: 3000,
								disableOnInteraction: false,
							},
							pagination: {
								el: '.swiper-pagination',
								clickable: true,
							},
							navigation: {
								nextEl: '.swiper-button-next',
								prevEl: '.swiper-button-prev',
							},
							breakpoints: {
								320: {
									slidesPerView: 1,
									spaceBetween: 20
								},
								640: {
									slidesPerView: 2,
									spaceBetween: 20
								},
								1024: {
									slidesPerView: 4,
									spaceBetween: 10
								}
							},
							on: {
								init: function () {
									// 初始加载首屏可见图片
									lazyLoadImages();
								},
								slideChange: function () {
									// 每次滑动后加载新出现的图片
									lazyLoadImages();
								}
							}
						});
					});

					// 添加窗口滚动事件监听，用于处理初始加载时可能不在视口中的图片
					window.addEventListener('load', lazyLoadImages);
				</script>

			</div>
		</div>

		<div class="homeDzzx" style="padding-bottom: 0;">
			<div class="homeDzzxH">
				<div class="bg"></div>
				<div class="homeDzzxCont">
					<h2>按需定制，一对一量身打造</h2>
					<h3><a href="./contact.html">联系我们</a></h3>
				</div>
			</div>
		</div>


		<div class="homeNews" style="background-color: #f8f6ee;">
			<div class="wrap">
				<div class="homeNewsH clearfloat">
					<div class="line"></div>
					<div class="left">
						<h3><em>NEWS</em> <span>新闻资讯</span></h3>
					</div>
					<div class="right homeNewsTab">
						<a class="on" href="javascript:">公司新闻</a>
						</ul>
					</div>
				</div>
				<div class="homeNewsW">
					<div class="homeNewsInner clearfloat">
						<ul class="left" id="news-list-left">
						</ul>
						<ul class="right" id="news-list-right">
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>




	<div id="footer">
		<div class="wrap clearfloat">
			<div class="left footerZx">
				<div class="footerZxPhone">
					<h3>咨询热线：</h3>
					<p>0579-82209562</p>
					<!-- <p style="margin-top: 12px;">400-9696-276</p> -->
				</div>
				<p class="footerCopy">锦凯智塑 Copyright © 2022 版权所有浙ICP备：2022031224号-1</p>
				<div style="width:300px;margin:0 auto; padding:20px 0;">
					<a target="_blank" href="javascript:void(0)"
						style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img
							src="./images/gongan.png" style="float:left;" />
						<p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">
							浙公网安备
							33070202100532号</p>
					</a>
				</div>
			</div>
			<div class="left footerEwm">
				<div class="pic"><img
						src="https://ossbucketzhink.oss-cn-hangzhou.aliyuncs.com/home-assets/wxcode-1.jpg" /></div>
				<p>手机扫一扫</p>
			</div>
			<ul class="clearfloat">
				<li>
					<h3>关于我们</h3>
					<p><a href="./about.html">公司简介</a></p>
				</li>
				<li>
					<h3>友情链接</h3>
					<p><a href="https://www.zhink.cc/">正凯集团</a></p>
					<p><a href="http://zhinktex.cc/">正凯纺织</a></p>
					<p><a href="http://zhinkcf.cc/">正凯化纤</a></p>
					<p><a href="http://www.zhinkxc.cc/">正凯新材</a></p>
					<p><a href="http://www.wkai.cc/">万凯新材料</a></p>
					<p><a href="https://www.zhink.cc/">润凯产业园</a></p>
				</li>
				<li>
					<h3>产品展示</h3>
					<p><a href="./show.html">相关产品</a></p>
				</li>
				<li>
					<h3>新闻中心</h3>
					<p><a href="./news.html">公司新闻</a></p>
					<p><a href="./news.html">行业动态</a></p>
				</li>
			</ul>
		</div>
	</div>
	<!--</div>-->
	<!--/footer-->

	<!--wap-->
	<div class="wapBottom">
		<ul class="clearfloat">
			<li><a href="index.html" class="homepage">首页</a></li>
			<li><a href="about.html">关于我们</a></li>
			<li><a href="tel:13586974916">电话咨询</a></li>
			<li><a href="contact.html">联系我们</a></li>
		</ul>
	</div>
	<!--/wap-->

	<div class="wapBg"></div>
</body>
<script src="js/utils.js"></script>
<script type="text/javascript">
	// $('.sliderHomeSpT').bxSlider({
	// 	'auto': false,
	// 	'controls': true,
	// 	'touchEnabled': true,
	// 	'pager': true,
	// })

	var lineW = $(".lineW span").width();
	$('.sliderHomeSpB').bxSlider({
		'auto': false,
		infiniteLoop: false,
		'controls': true,
		'touchEnabled': true,
		'pager': true,
		'slideWidth': '204',
		'minSlides': 2,
		'maxSlides': 5,
		'moveSlides': 5,
		onSlideAfter: function ($slideElement, oldIndex, newIndex) {
			var num = $(".homeSpBW .bx-pager .bx-pager-item").length;
			var lineWW = $(".lineW").width();

			console.log(oldIndex, newIndex)
			if (newIndex == 0) {
				$(".lineW span").css({
					"width": lineW + 'px'
				})
			} else {
				$(".lineW span").css({
					"width": (lineWW / num) * (newIndex + 1) + 'px'
				})
			}
		},
	})

	// 获取首页新闻数据
	$.ajax({
		cache: false,
		url: 'https://www.jkai.net.cn/jeecg-boot/door/info/list?column=createTime&type=9&order=desc&pageNo=1&pageSize=4&tenantId=2&language=zh_CN',
		method: 'get',
		success: function (res) {
			var htmlLeft = '';
			var htmlRight = '';
			var data = res.result.records;

			$.each(data, function (index, newsItem) {
				console.log(newsItem)
				if (index < 2) {
					htmlLeft += `
					<li class="clearfloat">
						<div class="homeNewsNum">0${index + 1}</div>
						<div class="homeNewsCont">
							<div class="homeNewsContH">
								<h3 class="single-line"><a href="news-detail.html?id=${newsItem.id}">${newsItem.title}</a></h3>
								<p>${newsItem.createTime.split(' ')[0]}</p>
								<a class="homeNewsMore" href="news-detail.html?id=${newsItem.id}">MORE +</a>
							</div>
							<div class="homeNewsTxt">
								<p class="multi-line">${newsItem.briefIntroduction}</p>
							</div>
						</div>
					</li>
				`;
				} else {
					htmlRight += `
					<li class="clearfloat">
						<div class="homeNewsNum">0${index + 1}</div>
						<div class="homeNewsCont">
							<div class="homeNewsContH">
								<h3 class="single-line"><a href="news-detail.html?id=${newsItem.id}">${newsItem.title}</a></h3>
								<p>${newsItem.createTime.split(' ')[0]}</p>
								<a class="homeNewsMore" href="news-detail.html?id=${newsItem.id}">MORE +</a>
							</div>
							<div class="homeNewsTxt">
								<p class="multi-line">${newsItem.briefIntroduction}</p>
							</div>
						</div>
					</li>
				`;
				}
			});
			$('#news-list-left').html(htmlLeft);
			$('#news-list-right').html(htmlRight);
		}
	})
	$('.sliderHomeDzzc').bxSlider({
		'auto': true,
		'controls': true,
		'touchEnabled': true,
		'pager': false,
		'slideWidth': '280',
		'minSlides': 2,
		'maxSlides': 4,
		'moveSlides': 1,
		'speed': 600,
		//	    'slideMargin': 20
	})
	// 获取首页banner图
	let html = '';
	$.ajax({
		cache: false,
		url: 'https://www.jkai.net.cn/jeecg-boot/door/info/listPicture?tenantId=2&module=1&language=zh_CN',
		method: 'get',
		success: function (res) {
			var data = res.result.records;

			$.each(data, function (index, picItem) {
				html += `
				<li>
					<a href="javascript:;"><img class="img1" src="${picItem.pictrueUrl}" /><img class="img2"
							src="${picItem.pictrueUrl}" /></a>
				</li>
				`;
			});

			$('.slider1').html(html);

			$('.slider1').bxSlider({
				'auto': true,
				'controls': true,
				'touchEnabled': true,
				'pager': true,
				'speed': 1000,
				'pause': 4000,
			})
		}
	})

	// 首页访问量埋点
	$.ajax({
		cache: false,
		url: 'https://www.jkai.net.cn/jeecg-boot/door/info/addPageView?tenantId=2'
	})
</script>
<script>
	// 数字增长动画
	function animateValue(element, start, end, duration, suffix = '') {
		let startTimestamp = null;
		const step = (timestamp) => {
			if (!startTimestamp) startTimestamp = timestamp;
			const progress = Math.min((timestamp - startTimestamp) / duration, 1);
			const current = Math.floor(progress * (end - start) + start);
			element.textContent = current + suffix;
			if (progress < 1) {
				window.requestAnimationFrame(step);
			}
		};
		window.requestAnimationFrame(step);
	}

	// 检查元素是否在视口中
	function isInViewport(element) {
		const rect = element.getBoundingClientRect();
		return (
			rect.top >= 0 &&
			rect.left >= 0 &&
			rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
			rect.right <= (window.innerWidth || document.documentElement.clientWidth)
		);
	}

	// 初始化统计数字动画
	function initStatsAnimation() {
		const statCards = document.querySelectorAll('.stat-card');
		let animationTriggered = false;

		function checkScroll() {
			if (animationTriggered) return;

			statCards.forEach(card => {
				if (isInViewport(card)) {
					animationTriggered = true;
					const numberElement = card.querySelector('.stat-number');
					const value = parseFloat(card.getAttribute('data-value'));
					const suffix = card.getAttribute('data-suffix') || '';

					animateValue(numberElement, 0, value, 2000, suffix);
				}
			});
		}

		// 添加滚动事件监听
		window.addEventListener('scroll', checkScroll);
		// 初始检查一次
		checkScroll();
	}

	// 页面加载完成后初始化
	document.addEventListener('DOMContentLoaded', function () {
		// 初始化统计数字动画
		initStatsAnimation();

		// 其他页面初始化代码...
		console.log(window.location.pathname);
	});

	// 获取导航菜单
	$.ajax({
		cache: false,
		url: 'https://www.jkai.net.cn/jeecg-boot/door/info/navigationList',
		type: "post",
		contentType: 'application/json; charset=utf-8',
		data: JSON.stringify({
			tenantId: 2,
			language: "zh_CN"
		}),
		success: function (res) {
			const showMenu = res.result.filter(item => item.hidden === false);
			let html = '';

			function buildMenuItems(menuItems) {
				let itemsHtml = '';
				menuItems.forEach(item => {
					if (item.hidden) return;

					const hasChildren = item.children && item.children.some(child => !child.hidden);
					const isActive = item.url === window.location.pathname ||
						item.url === '/index.html' ||
						(item.children && item.children.some(child =>
							child.url === window.location.pathname ||
							child.redirect === window.location.pathname
						));

					itemsHtml += `
						<li class="hover-nav ${isActive ? 'active' : ''}">
							<a href="${item.redirect || item.url || '#'}">${item.title}</a>`;

					if (hasChildren) {
						itemsHtml += `
							<div class="navDown">
								${item.children
								.filter(child => !child.hidden)
								.map(child => `
									<div class="nav-item">
										<a href="${child.redirect || child.url || '#'}">${child.title}</a>
									</div>`)
								.join('')}
							</div>`;
					}

					itemsHtml += `</li>`;
				});
				return itemsHtml;
			}

			html = buildMenuItems(showMenu);
			$('.menu-wrapper').html(html);
		}
	})
</script>

</html>
